• 单文件上传
    • addFile('name值', '标题' [, '提示', '默认值', '限制大小', '文件后缀', '额外css类'])" level="2">addFile('name值', '标题' [, '提示', '默认值', '限制大小', '文件后缀', '额外css类'])
      • 简单例子" level="3">简单例子
      • 默认值" level="3">默认值
      • 限制大小
      • 文件后缀" level="3">文件后缀
      • 自定义js回调" level="3">自定义js回调

    单文件上传

    addFile('name值', '标题' [, '提示', '默认值', '限制大小', '文件后缀', '额外css类'])" class="reference-link">addFile('name值', '标题' [, '提示', '默认值', '限制大小', '文件后缀', '额外css类'])

    版本新增功能
    1.0.5自定义js回调函数

    标识符:file

    参数含义类型
    namename值string
    title标题string
    tips提示string
    default默认值string
    size限制大小(单位kb)string
    ext文件后缀(如:'rar,doc,zip')string
    extra_class额外css类string

    简单例子" class="reference-link">简单例子

    1. return ZBuilder::make('form')
    2. ->addFile('file', '文件')
    3. ->fetch();

    效果:

    单文件上传 - 图1

    默认值" class="reference-link">默认值

    默认值是附件id,不要填写文件地址

    限制大小

    默认可以不同填写大小限制,可以在后台,“系统” -> “系统设置” -> “上传”设置。

    如果在某些情况下,需要重新定义,可以填写此参数,大小为kb,比如限制上传大小为1mb。

    1. return ZBuilder::make('form')
    2. ->addFile('file', '文件', '', '', '1024')
    3. ->fetch();

    文件后缀" class="reference-link">文件后缀

    跟限制大小一样,可以在后台“系统” -> “系统设置” -> “上传”设置。

    也可以重新定义

    1. return ZBuilder::make('form')
    2. ->addFile('file', '文件', '', '', '1024', 'zip,7z')
    3. ->fetch();

    自定义js回调" class="reference-link">自定义js回调

    从1.0.5版本开始,可通过自定义js回调函数来处理上传成功之后,或者上传失败之后需要做的事情,比如:

    1. return ZBuilder::make('form')
    2. ->addFile('file', '文件')
    3. ->js('test') // 引入自定义的外部js文件
    4. ->fetch();

    然后在test.js中定义

    1. var dp_file_upload_success = function () {
    2. console.log(1111)
    3. };

    那么在文件上传成功后,会执行dp_file_upload_success函数,在控制台输出1111.当然了,你也可以利用jQuery给表单添加个按钮,或者显示隐藏某些元素,这个按自己实际需求做就可以了。

    dp_file_upload_success函数是针对表单中的所有文件上传组件,包括单文件上传,多文件上传,也就是说,不管你的表单中添加了多少个文件上传组件,每次上传成功,都会去执行dp_file_upload_success函数。

    如果只想某个文件上传组件上传成功时才触发dp_file_upload_success函数,可以这么做。

    1. return ZBuilder::make('form')
    2. ->addFile('file1', '文件1')
    3. ->addFile('file2', '文件2')
    4. ->js('test') // 引入自定义的外部js文件
    5. ->fetch();

    test.js代码如下:

    1. var dp_file_upload_success_file2 = function () {
    2. console.log(1111)
    3. };

    这样的话,只有当file2这个组件上传文件成功后才会触发dp_file_upload_success_file2函数。而当file1组件上传文件成功后,是不会触发dp_file_upload_success_file2函数的。

    除了dp_file_upload_success函数外,还支持以下回调函数。

    全局函数含义
    dpfile_upload_success文件上传成功后执行,针对所有文件上传组件
    dp_file_upload_success表单项名仅对某个文件上传组件上传成功后起作用
    dpfile_upload_error文件上传失败后执行,针对所有文件上传组件
    dp_file_upload_error表单项名仅对某个文件上传组件上传失败后起作用
    dpfile_upload_complete文件上传完成后执行,针对所有文件上传组件
    dp_file_upload_complete表单项名仅对某个文件上传组件上传完成后起作用